<template>
  <div class="carousel-container" @touchstart="handleTouchStart" @touchend="handleTouchEnd"
    @mouseleave="handleMouseLeave">
    <div class="carousel-wrapper" ref="carouselWrapper" @wheel.prevent>
      <div v-for="(video, index) in videos" :key="index" class="carousel-item" @click="playVideo(video.src)"
       >
        <!-- 可以在这里添加播放图标等 -->
      </div>
    </div>
    <video ref="videoPlayer" v-show="isFullScreen" @ended="closeFullScreen" controls>
      <source :src="currentVideoSrc" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videos: [
        { src: require('@/assets/videos/video1.mp4'), thumbnail: '' },
        { src: require('@/assets/videos/video2.mp4'), thumbnail: '' },
        { src: require('@/assets/videos/video3.mp4'), thumbnail: '' },
        { src: require('@/assets/videos/video4.mp4'), thumbnail: '' },
        { src: require('@/assets/videos/video5.mp4'), thumbnail: '' },
        // ... 更多视频  
      ],
      isFullScreen: false,
      currentVideoSrc: '',
      scrollInterval: null,
      scrollPosition: 0,
      touchStartX: 0,
      isScrolling: false,
    };
  },
  mounted() {
    this.startAutoScroll();
  },
  beforeDestroy() {
    this.stopAutoScroll();
  },
  methods: {
    startAutoScroll() {
      this.scrollInterval = setInterval(() => {
        if (!this.isScrolling) {
          // 假设每个视频项宽度为300px，这里根据实际需求调整  
          const itemWidth = 300;
          this.scrollPosition -= itemWidth / 4; // 稍微滚动一点，避免太快  
          this.updateScrollPosition();
        }
      }, 1000); // 每秒滚动一次  
    },
    stopAutoScroll() {
      clearInterval(this.scrollInterval);
      this.scrollInterval = null;
    },
    updateScrollPosition() {
      this.$refs.carouselWrapper.style.transform = `translateX(${this.scrollPosition}px)`;
    },
    handleTouchStart(e) {
      this.isScrolling = true;
      this.touchStartX = e.changedTouches[0].clientX;
      this.stopAutoScroll();
    },
    handleTouchEnd(e) {
      const touchEndX = e.changedTouches[0].clientX;
      const deltaX = touchEndX - this.touchStartX;
      // 根据deltaX的值来更新滚动位置（这里简化处理，只考虑停止滚动后恢复自动滚动）  
      // ...  

      // 延迟1秒后继续自动滚动  
      setTimeout(() => {
        if (!this.isScrolling) {
          this.startAutoScroll();
        }
      }, 1000);
      this.isScrolling = false;
    },
    handleMouseLeave() {
      // 仅在非滚动状态下恢复自动滚动  
      if (!this.isScrolling) {
        setTimeout(() => {
          this.startAutoScroll();
        }, 1000);
      }
    },
    playVideo(src) {
      this.currentVideoSrc = src.default; // 注意可能需要.default  
      this.isFullScreen = true;
      this.$refs.videoPlayer.play();
    },
    closeFullScreen() {
      this.isFullScreen = false;
      this.startAutoScroll(); // 视频结束后恢复自动滚动  
    },
  },
};  
</script>

<style scoped>
.carousel-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  background-color: aqua;
  /* 根据需要调整 */
}

.carousel-wrapper {
  display: flex;
  transition: transform 0.3s ease;
}

.carousel-item {
  flex: 0 0 auto;
  width: 300px;
  /* 根据视频缩略图的尺寸调整 */
  height: 200px;
  /* 根据需要调整 */
  background-size: cover;
  background-position: center;
  cursor: pointer;
  /* 添加其他样式 */
}

/* 其他样式 */
</style>